<template>
  <div>
      <!-- 面包屑区域 -->
       <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

  <!-- 卡片视图区域 -->
  <el-card>
     <el-row :gutter="20">
        <el-col :span="9">
             <el-input placeholder="请输入内容" v-model="keyword" clearable @clear="clearkeyword">
                <el-button slot="append" icon="el-icon-search"  @click="search(keyword)"></el-button>
            </el-input>
        </el-col>
        <el-col :span="4">
            <el-button type="primary" >添加商品</el-button>
        </el-col>

        <!-- 用户列表区域 -->
          <el-table
          
    :data="goodslist"
     border
     stripe
    
 >
 <el-table-column type="index"  ></el-table-column>
    <el-table-column
      
      label="图片"
      width="200" 
       >
     
          <template slot-scope="scope">
         <img :src="scope.row.img_url" alt="">
          </template>
      
   
    </el-table-column>
    <el-table-column
      prop="title"
      label="产品名称"
      width="200">
    </el-table-column>

    <el-table-column
      prop="market_price"
      label="市场价"
      width="100"
      >
    </el-table-column>

     <el-table-column
      prop="sell_price"
     label="销售价"
      width="200"
      >
  
    </el-table-column>
    <el-table-column
      prop="stock"
     label="库存量"
      width="200"
      >
  
    </el-table-column>

     <el-table-column
      label="操作"
      width="300"
      >
      <!-- 修改按钮 -->

    <el-tooltip class="item" effect="dark" content="修改商品信息" placement="top" :enterable="false">
       <el-button type="primary" icon="el-icon-edit"></el-button>
    </el-tooltip>
   
    <!-- 删除按钮 -->
    <el-tooltip class="item" effect="dark" content="删除商品" placement="top" :enterable="false">
    <el-button type="danger" icon="el-icon-delete"></el-button>
    </el-tooltip>
    <!-- 分配角色按钮 -->
     <el-tooltip class="item" effect="dark" content="设置商品" placement="top" :enterable="false">
    <el-button type="warning" icon="el-icon-setting"></el-button>
    </el-tooltip>
    </el-table-column>
        </el-table>

    </el-row>
  <!-- 分页 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.pageindex"
      :page-sizes="[12, 3, 5]"
      :page-size="this.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="4">
    </el-pagination>
  </el-card>
  </div>

</template>

<script>
export default {
    data(){
        return{
        pageindex:1,
        pagesize:10,
        goodslist:[],
        keyword:'',
       result:[]
        }
    },
    created(){
        this.getgoodsList();
    },
    methods:{
        getgoodsList(){
              this.$ajax({
                  method:'get',
                  url:'/goods/goodslist',
                  params:{
                      pageindex:this.pageindex,
                      pagesize:this.pagesize,
                  }
              }).then(response => {
                  console.log(response);
                  var data = response.data;
                  if(data.Status == 0){
                      this.goodslist = data.Data;
                      console.log(this.goodslist);
                  }else{
                      this.$message.error('服务器获取用户列表失败!');
                  }
              })
          },
             // 监听pagesize
        handleSizeChange(newSize){
          console.log(newSize);
          this.pagesize = newSize;
          this.getgoodsList();
        },
        // 监听页码值改变的事件
        handleCurrentChange(newPage){
          this.pageindex = newPage;
          this.getgoodsList();
        },
          search(keyword){
            for(var i=0;i<this.goodslist.length;i++){
              if(this.goodslist[i].title.toLowerCase().indexOf(keyword.toLowerCase()) > -1){
                   this.result.push(this.goodslist[i]);
              }
            }
            this.goodslist = this.result;
        },
        clearkeyword(){
            this.getgoodsList();
            this.keyword='';
            this.result=[];
        }
    }
}
</script>

<style lang="less">
    .el-table .cell{
            img{
                width:50px;
            }
    }
</style>